<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blog ul {
            margin: 0;
            padding: 0;
        }
        
        .blog li {
            list-style: none;
            width: 600px;
            padding: 10px;
            line-height: 24px;
            border: 1px dashed #abcdef;
            margin-bottom: 10px;
        }
        
        button {
            margin-bottom: 10px;
        }
        
        .blog li a {
            color: red;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="80" rows="10"></textarea>
    <br>
    <button>发布微博</button>
    <div class="blog">
        <ul>

        </ul>
    </div>
</body>

</html>
<script>
    //1.微博发布
    //获取元素
    var oTextarea = document.querySelector('textarea'); //文本域的值依靠value属性，不是innerHTML
    var oBtn = document.querySelector('button');
    var oUl = document.querySelector('.blog ul');
    //系统提供方法，实现文本区域自动获取光标(焦点)
    oTextarea.focus();
    //添加事件
    oBtn.onclick = function() {
        //判断文本区域的value不能为空。
        if (oTextarea.value !== '') {
            //创建li元素，将文本区域的内容放到li里面，然后追加给ul元素。
            var cLi = document.createElement('li');
            cLi.innerHTML = oTextarea.value + ' <a href="javascript:;">删除</a>';
            //将最近添加的放到最前面。
            //思路：始终将创建的新元素插入到第一个元素的上面。
            if (oUl.children.length >= 1) { //一定有创建好的li元素存在
                oUl.insertBefore(cLi, oUl.children[0]);
            } else {
                oUl.appendChild(cLi); //第一条可以直接追加
            }
            //情况文本区域的内容
            oTextarea.value = '';
        } else {
            alert('请输入内容');
        }

        //获取a元素，添加点击事件，a元素只能在点击事件内获取。
        var aDel = document.querySelectorAll('.blog li a');
        for (var i = 0; i < aDel.length; i++) {
            aDel[i].onclick = function() {
                // alert(i); //这里的i是循环的最后一次值。如果循环不结束，根本就没有点击事件。
                // this:当前点击的a元素
                if (window.confirm('你确定要删除吗?')) {
                    oUl.removeChild(this.parentNode);
                }
            }
        }

        console.log(i); //这里的i是循环的最后一次值。如果循环不结束，根本就没有点击事件。
    }
</script>